<template>
  <div class="container">
    <div class="banner">
      <img
        src="http://www.juyike.cn/Public/Home/images/img_con/join.jpg"
        alt="加入我们"
      />
      <h2>加入我们</h2>
    </div>
    <div class="doc">
      <p class="state-p">
        人才是公司的重要财富，我们要让员工在这里找到归属感和幸福感!<br />
        共创、共享、共担将取代简单的雇佣关系，有潜力的员工也将以合伙人的身份主导自己的未来，从利益共同体走向事业共同体!
      </p>
      <ol class="navbar">
        <li>
          <a href="">招聘岗位</a>
        </li>
        <li>
          <a href="">应聘须知</a>
        </li>
      </ol>
      <div class="recruit">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: red }"
        >
          <el-table-column prop="date" label="公司"> </el-table-column>
          <el-table-column prop="name" label="职务"> </el-table-column>
          <el-table-column prop="address" label="部门"> </el-table-column>
          <el-table-column prop="address" label="招聘人数"> </el-table-column>
          <el-table-column prop="address" label="工作地点"> </el-table-column>
          <el-table-column prop="address" label="发布日期"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { Join_list } from '@/api/index.js';
export default {
  data() {
    return {
      enterpricedata:[],
      tableData: [],
    };
  },
  created() {
    this.getData();
    
  },
  methods: {
     
    // 获取数据
    getData() {
      const data={id:'1775202105191705470'}
      
      Join_list(data).then(res=> {
            console.log(res.data,'加入我们');
          this.enterpricedata = res.data
      })
      .catch(error=>{
          console.log(error)
      });
    },
    details(type) {
      this.$router.push({ path: "/details", query: { type: type } });
    },
  },
};
</script>
<style lang="less">
.container {
  width: 78.5%;
  left: 12.5%;
  position: absolute;
  top: 0;
  min-width: 1050px;
  max-width: 1200px;
  box-shadow: 5px 0 5px #f0f0f0;
  font-family: "微软雅黑";
  .banner {
    width: 100%;
    position: relative;
    img {
      width: 100%;
    }
    h2 {
      font-weight: 500;
      color: #fff;
      opacity: 0.7;
      font-size: 42px;
      line-height: 42px;
      position: absolute;
      left: 25px;
      top: 40%;
    }
  }
  .doc {
    padding: 0 0 50px 30px;
    .state-p {
      margin: 30px 0 35px 5%;
      font-size: 18px;
      line-height: 30px;
    }
    .navbar {
      background: url(http://www.juyike.cn/Public/Home/images/jyknavBg02.jpg) 0
        bottom no-repeat;
      width: 90%;
      margin: 30px auto;
      list-style-type: none;
      display: flex;
      li {
        width: 25%;
        height: 115px;
        float: left;
        text-align: center;
        cursor: pointer;
        a {
          color: #ee020d;
          font-size: 20px;
          height: 115px;
          line-height: 115px;
          display: inline-block;
          width: 100%;
          text-decoration: none;
          outline: none;
        }
        a:hover {
          background: url(http://www.juyike.cn/Public/Home/images/hover.jpg)
            no-repeat;
          color: #fff;
          background-size: 100% 115px;
        }
      }
    }
    .recruit {
      width: 90%;
      margin: 50px 0 0 5%;
      color: #666;
      table thead tr th {
        background: #e7e7e7;
        text-align: center;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #e7e7e7;
        font-size: 16px;
        font-weight: normal;
        color: black;
      }
    }
  }
}
</style>
